<template>
  <div class="region">
    <div class="region-databox">
      <div class="region-databox-header">
        <div class="box-bg group switch-route-box">
          <div
            class="switch-route-btn"
            v-for="(item,index) in navList"
            :key="index"
            :class="navListSum === index ? 'active' : ''"
            @click="SwitchRoute(index,item.path)"
          >
            <i></i>
            <span>{{ item.title }}</span>
          </div>
        </div>
        <div class="box-bg group regional-classification">
          <div class="title">
            <i></i><span>区域类型</span>
          </div>
          <div class="drop-down">
            <div class="drop-down-list1">
              <el-select v-model="value1" placeholder="请选择">
                <el-option
                  v-for="item in dropDownList1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="box-bg group time-classification">
          <div class="title">
            <i></i><span>时间类型</span>
          </div>
          <div class="drop-down">
            <div class="drop-down-list1">
              <el-select v-model="timevalue1" placeholder="请选择">
                <el-option
                  v-for="item in timeDropDownList1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="drop-down-list2">
              <el-date-picker
                popper-class="data-down"
                @focus="focus"
                v-model="timesvalue2"
                type="datetime"
                placeholder="选择日期"
                :clearable="false"
                default-time="00:00:00"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
        <div class="btnlist">
          <div class="all-btn" @click="statisticsBtn">统计</div>
          <div class="reset-btn" @click="resetBtn">重置</div>
        </div>
      </div>
      <div class="region-databox-content">
        <div class="enlarge-btn" @click="enlargeTable">
          <i class="el-icon-circle-plus-outline"></i>
        </div>
        <benchmark-table :tableData="tableData"></benchmark-table>
        <dialog-benchmark-table :isShow="isEnlargeTable" @DiaClose="DiaClose" :tableData="tableData"></dialog-benchmark-table>
      </div>
    </div>
    <div class="histogram-list">
      <div class="histogram">
        <title-post-page
          :AreaNameLIst="AreaNameLIst"
          :densityList="densityList1"
          title="基准月平均车辆数"
          units="辆"
          color="#07f5d194"
        ></title-post-page>
      </div>
      <div class="histogram">
        <title-post-page
          :AreaNameLIst="AreaNameLIst"
          :densityList="densityList2"
          title="车辆数相对变化"
          units="辆"
          color="#0857e99e"
        ></title-post-page>
      </div>
      <div class="histogram">
        <title-post-page
          :AreaNameLIst="AreaNameLIst"
          :densityList="densityList3"
          title="Nox排放量变化"
          units="kg"
          color="#079ef5ab"
        ></title-post-page>
      </div>
    </div>
  </div>
</template>

<script>
import * as dayjs from 'dayjs'
import { mapState } from 'vuex'
import DialogBenchmarkTable from '@/components/MyTable/DialogBenchmarkTable'
import benchmarkTable from '@/components/MyTable/benchmarkTable'
import TitlePostPage from '@/components/Myecharts/TitlePostPage'

import { getRegionAnalysis, getRegionDict,getBenchmarkBased } from '@/api/largescreen/'

let keys = {
  'regionName': 'AreaName', //区域名称
  'vehicleBasedNum': 'Num', //基准月平均车辆数
  'vehicleNum': 'CountryThree',//当前车辆数
  'vehicleRatioNum': 'CountryFour',//相对变化量
  'vehicleRatio': 'CountryFive',//相对变化比例
  'g5Ratio': 'CountryN',//国五及以上车辆比例变化
  'g34Num': 'CountryS',//国四以下车辆数
  'g5Num': 'CountryF',//国五车辆数
  'g6NoGreenNum': 'CountryL',//非国六清洁能源车辆数（非国六燃气且非电能或氢能的新能源车辆数）
  'noxRatioEmissions': 'pm',//Nox排放量变化
  'noxRatio': 'nox',//Nox排放量变化比例
}
let qyList = ['regionName']
let bfbList = [
   'vehicleRatio', 'g5Ratio', 'noxRatio'
]

let AreaNameLIst = []
let densityList1 = []
let densityList2 = []
let densityList3 = []
const isNull = (data)=>{
  data ? data : (data = 'null')
  return data
}
const DataConvert = (data) => {
  let temp = []
  AreaNameLIst = []
  densityList1 = []
  densityList2 = []
  densityList3 = []
  for (const v of data) {
    let tmp = {}
    for (const k in v) {
      // console.log(v[k])
      if (keys.hasOwnProperty(k)) {
        if (qyList.includes(k)) {
          let isnull = isNull(v[k])
          tmp[keys[k]] = isnull
          AreaNameLIst.push(isnull)
        } else if (bfbList.includes(k)) {
          let isnull = isNull(v[k])
          if(isnull === 'null'){
            tmp[keys[k]] = isnull
            if(k === bfbList[0]){
              densityList2.push(isnull)
            }
          }else {
            tmp[keys[k]] = (isnull * 100).toFixed(2) + '%'
            if(k === bfbList[0]){
              densityList2.push((isnull * 100).toFixed(2))
            }
          }

        } else {
          let isnull = isNull(v[k])
          if(isnull === 'null'){
            tmp[keys[k]] = (typeof (isnull) === 'number') ? parseFloat(isnull.toFixed(3)) : isnull
            if(k === 'vehicleBasedNum'){
              densityList1.push(isnull)
            }
            if(k === 'noxRatioEmissions'){
              densityList3.push(isnull)
            }
          }else {
            tmp[keys[k]] = (typeof (isnull) === 'number') ? parseFloat(isnull.toFixed(3)) : isnull
            if(k === 'vehicleBasedNum'){
              densityList1.push(isnull.toFixed(0))
            }
            if(k === 'noxRatioEmissions'){
              densityList3.push(isnull.toFixed(3))
            }
          }



        }
      }
    }
    // tmp.CountryN = (parseFloat(tmp.CountryFive)*100 + parseFloat(tmp.CountrySix)*100)/100 + '%'
    temp.push(tmp)

  }
  return temp
}

/*当前阶段小时无法请求数据，获取上小时的时间戳*/
let createhour = dayjs.default().hour() - 1
let createStr = dayjs.default(new Date()).hour(createhour).format('YYYY-MM-DD HH:00:00')
let createTime = dayjs.default(createStr).toDate()

export default {
  name: 'benchmark',
  components: {
    DialogBenchmarkTable,
    benchmarkTable,
    TitlePostPage,
  },
  data() {
    return {
      /*对比按钮数据*/
      navList: [
        { title: '区域对比', path: '/statistical/region' },
        { title: '趋势对比', path: '/statistical/trend' },
        { title: '基准分析', path: '/statistical/benchmark' }
      ],
      navListSum: 0,
      /*区域切换*/
      value1: 'qx',
      dropDownList1: [
        { value: 'qx', label: '区域' },
        { value: 'gyy', label: '工业区' },
        { value: 'gkd', label: '国控点' }
      ],
      /*时间类型*/
      timevalue1: 'month',
      timeDropDownList1: [
        { value: 'month', label: '月' },
        { value: 'week', label: '周' },
        { value: 'day', label: '日' },
        { value: 'hour', label: '小时' }
      ],
      timesvalue2: createTime,
      // 表格
      tableData: [],
      AreaNameLIst: [],
      densityList1: [],
      densityList2: [],
      densityList3: [],
      //是否弹出表格
      isEnlargeTable:false,
    }
  },
  mounted() {
    // this.GetRegionAnalysis()
    this.GetBenchmarkBased()
  },
  computed: {
    ...mapState({
      TJRegions: state => state.TJRegions
    })
  },
  methods: {
    /*切换对比页面按钮*/
    SwitchRoute(index, path) {
      if (this.$route.path.indexOf(path) === -1) {

        this.navListSum = index
        this.$router.push({ path: path })
      }
    },
    /*时间选择*/
    focus(){
      // 设置时间选择器中样式
      this.$nextTick(() => {
        document.getElementsByClassName('el-time-spinner__wrapper')[0].setAttribute('style', 'width:100%') // 小时列居中
        document.getElementsByClassName('el-time-spinner__wrapper')[1].setAttribute('style', 'display:none') // 隐藏分列
        document.getElementsByClassName('el-button--text')[0].setAttribute('style', 'display:none') // 隐藏此刻按钮
      })
    },
    /*统计按钮*/
    statisticsBtn() {
      this.GetBenchmarkBased()
    },
    /*重置按钮*/
    resetBtn() {
      this.value1 = this.dropDownList1[0].value
      this.timevalue1 = this.timeDropDownList1[0].value

      let resetHour = dayjs.default().hour() - 1
      let resetStr = dayjs.default(new Date()).hour(resetHour).format('YYYY-MM-DD HH:00:00')
      let resetTime = dayjs.default(resetStr).toDate()
      this.timesvalue2 = resetTime
    },
    GetBenchmarkBased() {
      let that = this
      let stTime = dayjs.default(that.timesvalue2).format('YYYY-MM-DD HH:00:00')
      getBenchmarkBased({ 'regionType': that.value1, 'stTime': stTime, 'timeType': that.timevalue1 })
        .then(res => {
          // console.log(res.data)
          this.tableData =DataConvert(res.data)
        })
    },

    /*放大按钮*/
    enlargeTable(){
      this.isEnlargeTable = true
    },
    /*弹出框关闭返回事件*/
    DiaClose(){
      this.isEnlargeTable = false
    }
  },
  watch: {
    '$route': {
      handler: function(val, oldval) {
        // 当前先这样 todo 之后需要监听路由
        for (const k in this.navList) {
          if (this.navList[k].path.indexOf(val.name) !== -1) {
            this.navListSum = parseInt(k)
            break
          }
        }
      },
      immediate: true
    },
    'value1': {
      immediate: true,
      deep: true,
      handler: function(val, oldval) {

      }
    },
    'tableData': {
      immediate: true,
      deep: true,
      handler: function(val, oldval) {
        if(val.length > 0){
          this.AreaNameLIst = AreaNameLIst
          this.densityList1 = densityList1
          this.densityList2 = densityList2
          this.densityList3 = densityList3
          /*console.log(AreaNameLIst)
          console.log(densityList)*/
        }

      }
    },
    'timesvalue2': {
      immediate: true,
      deep: true,
      handler: function(val, oldval) {

      }
    }
  }

}
</script>

<style scoped lang="scss">
.region {
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  //背景
  .box-bg {
    background-image: linear-gradient(0deg, rgba(55, 55, 74, 0.25) 0%, rgba(55, 55, 74, 0.25) 100%);

  }

  //左侧数据对比块
  .region-databox {
    width: 1250px;
    height: 100%;
    margin-right: 50px;
    //左侧顶部
    .region-databox-header {
      width: 100%;
      display: flex;
      align-items: center;
      //顶部div间距
      .group {
        margin-right: 15px;
      }

      .switch-route-box {
        width: 325px;
        height: 115px;
        box-sizing: border-box;
        padding: 15px 0px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;

        .switch-route-btn {
          width: 100px;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-direction: column;
          cursor: pointer;

          i {
            width: 45px;
            height: 45px;
            background-size: contain;
          }

          span {
            font-size: 22px;
            color: #e9eef3;
            line-height: 1;
          }

          &:nth-child(1) {
            i {
              background: url("~@/assets/images/region-btn.svg") no-repeat center center;
            }
          }

          &:nth-child(2) {
            i {
              background: url("~@/assets/images/trend-btn.svg") no-repeat center center;
            }
          }
          &:nth-child(3) {
            i {
              background: url("~@/assets/images/benchmark-btn.svg") no-repeat center center;
            }
          }
        }

        .active {
          span {
            color: #07f5c5;
          }

          &:nth-child(1) {
            i {
              background: url("~@/assets/images/region-btn-active.svg") no-repeat center center;
            }
          }

          &:nth-child(2) {
            i {
              background: url("~@/assets/images/trend-btn-active.svg") no-repeat center center;
            }
          }
          &:nth-child(3) {
            i {
              background: url("~@/assets/images/benchmark-btn-active.svg") no-repeat center center;
            }
          }
        }

      }

      .regional-classification {
        width: 350px;
        height: 115px;
        box-sizing: border-box;
        padding: 17px;

        .title {
          width: 100%;
          height: 26px;
          display: flex;
          align-items: center;
          margin-bottom: 14px;
          cursor: default;

          i {
            width: 26px;
            height: 26px;
            margin-right: 11px;
            background: url("~@/assets/images/regional-icon.svg") no-repeat center center;
            background-size: contain;
          }

          span {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 22px;
            line-height: 1;
            color: #e4e5e9;
          }
        }

        .drop-down {
          width: 100%;
          height: 40px;
          display: flex;
          align-items: center;
          position: relative;

          .input-fiexd {
            position: absolute;
            top: 0px;
            right: 30px;
            width: 170px;
            height: 40px;
            line-height: 40px;
            box-sizing: border-box;
            padding-left: 15px;
            color: #979fa8;
            font-size: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .drop-down-list1 {
            width: 100%;
            height: 100%;
            background-color: #0a1f3e;
          }

          ::v-deep .el-select {
            width: 100%;
            height: 100%;
          }

          ::v-deep .el-input {
            height: 100%;
          }

          ::v-deep .el-input__inner {
            line-height: 40px;
            height: 100%;
            background-color: transparent;
            border: none;
            border-radius: 0;
            color: #979fa8;
            font-size: 18px;
            overflow: hidden;
            width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          ::v-deep .el-input__inner::-webkit-input-placeholder {
            display: block;
            color: #979fa8;
            font-size: 18px;
            overflow: hidden;
            width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          ::v-deep .el-icon-arrow-up:before {
            content: '';
            width: 20px;
            height: 20px;
            display: inline-block;
            vertical-align: middle;
            transform: rotate(180deg);
            background: url("~@/assets/images/icon-arrow.svg") no-repeat center center;
            background-size: contain;
          }

        }
      }

      .time-classification {
        width: 400px;
        height: 115px;
        box-sizing: border-box;
        padding: 17px;

        .title {
          width: 100%;
          height: 26px;
          display: flex;
          align-items: center;
          margin-bottom: 14px;
          cursor: default;

          i {
            width: 26px;
            height: 26px;
            margin-right: 11px;
            background: url("~@/assets/images/time-icon.svg") no-repeat center center;
            background-size: contain;
          }

          span {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 22px;
            line-height: 1;
            color: #e4e5e9;
          }
        }

        .drop-down {
          width: 100%;
          height: 40px;
          display: flex;
          align-items: center;
          position: relative;

          .input-fiexd {
            position: absolute;
            top: 0px;
            right: 30px;
            width: 170px;
            height: 40px;
            line-height: 40px;
            box-sizing: border-box;
            padding-left: 15px;
            color: #979fa8;
            font-size: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .drop-down-list1 {
            width: 100px;
            height: 100%;
            margin-right: 15px;
            background-color: #0a1f3e;

            ::v-deep {
              .el-select {
                width: 100%;
                height: 100%;
              }

              .el-input {
                height: 100%;
              }

              .el-input__inner {
                line-height: 40px;
                height: 100%;
                background-color: transparent;
                border: none;
                border-radius: 0;
                color: #979fa8;
                font-size: 18px;
                overflow: hidden;
                width: 100%;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              .el-input__inner::-webkit-input-placeholder {
                display: block;
                color: #979fa8;
                font-size: 18px;
                overflow: hidden;
                width: 100%;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              .el-icon-arrow-up:before {
                content: '';
                width: 20px;
                height: 20px;
                display: inline-block;
                vertical-align: middle;
                transform: rotate(180deg);
                background: url("~@/assets/images/icon-arrow.svg") no-repeat center center;
                background-size: contain;
              }
            }
          }

          .drop-down-list2 {
            width: 250px;
            height: 100%;
            background-color: #0a1f3e;

            ::v-deep {
              .el-date-editor.el-input, .el-date-editor.el-input__inner {
                width: 100%;
                position: relative;
              }

              .el-input--medium .el-input__inner {
                padding-left: 20px;
                height: 40px;
                line-height: 40px;
                background-color: transparent;
                border: none;
                font-size: 18px;
                color: #136fcd;
              }

              .el-input--medium .el-input__inner::-webkit-input-placeholder {
                font-size: 18px;
                color: #979fa8;
              }

              .el-input__prefix {
                position: absolute;
                left: auto;
                right: 8px;
                top: 50%;
                width: 20px;
                height: 20px;
                margin-top: -10px;
                background: url("~@/assets/images/calendar-icon.svg") no-repeat center center;
                background-size: contain;
              }

              .el-icon-time:before {
                display: none;
              }

              .el-input__suffix {
                display: none;
              }

            }

          }


        }
      }

      .btnlist {
        display: block;
        width: 130px;
        height: 115px;

        .all-btn {
          width: 100%;
          height: 48px;
          box-sizing: border-box;
          margin-bottom: 18px;
          background-image: linear-gradient(0deg, rgba(4, 48, 71, 0.6) 0%, rgba(13, 180, 197, 0.6) 100%);
          line-height: 48px;
          text-align: center;
          font-size: 22px;
          color: #e8edf3;
          cursor: pointer;
        }

        .reset-btn {
          width: 100%;
          height: 48px;
          box-sizing: border-box;
          background-image: linear-gradient(0deg, rgba(55, 55, 74, 0.6) 0%, rgba(55, 55, 74, 0.6) 100%);
          line-height: 48px;
          text-align: center;
          font-size: 22px;
          color: #e8edf3;
          cursor: pointer;
        }
      }
    }

    //左侧表格
    .region-databox-content {
      width: 100%;
      height: 756px;
      padding-top: 20px;
      box-sizing: border-box;
      position: relative;

      .enlarge-btn {
        position: absolute;
        top: 22px;
        right: 10px;
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        overflow: hidden;
        color: #e8edf3;
        cursor: pointer;
        z-index: 10;

        i {
          font-size: 35px;
        }
      }
    }
  }

  .histogram-list {
    width: 520px;
    height: 100%;

    .histogram {
      width: 100%;
      height: 270px;
      margin-bottom: 30px;
      background-image: linear-gradient(0deg, rgba(55, 55, 74, 0.25) 0%, rgba(55, 55, 74, 0.25) 100%);
      border: dotted 1px #f3e8e866;
      box-sizing: border-box;
      border-radius: 1px;

      &:last-child {
        margin-bottom: 0px;
      }

      div {
        width: 100%;
        height: 100%;
      }
    }
  }

}

</style>
